<template>
    <div class="p-2">
        <div>
            <div class="my-4 text-xl">快捷操作</div>
            <div class="flex flex-wrap">
                <div
                    v-for="item in quick"
                    class="flex items-center mr-4 mb-4 bg-gray-100 p-6 rounded cursor-pointer hover:bg-gray-200"
                    @click="router.push(item.url)"
                >
                    <el-icon :size="20" class="mr-2"
                        ><component :is="item.icon"
                    /></el-icon>
                    <div class="whitespace-nowrap">{{ item.label }}</div>
                </div>
            </div>
        </div>
        <div>
            <div class="my-4 text-xl">热门</div>
            <div class="flex">
                <div class="flex-1 pr-8">
                    <div>热门文章</div>
                    <div class="">
                        <el-table :data="hotArticle.rows">
                            <el-table-column
                                type="index"
                                label="序号"
                                width="80"
                            />
                            <el-table-column prop="title" label="标题" />
                            <el-table-column
                                prop="viewCount"
                                label="浏览量"
                                width="100"
                            />
                        </el-table>
                    </div>
                </div>
                <div class="flex-1 pr-8">
                    <div>热门案例</div>
                    <div>
                        <el-table :data="hotCases.rows">
                            <el-table-column
                                type="index"
                                label="序号"
                                width="80"
                            />
                            <el-table-column prop="title" label="标题" />
                            <el-table-column
                                prop="viewCount"
                                label="浏览量"
                                width="100"
                            />
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getHotList } from '@/apis/hot'
import {
    ChatLineSquare,
    DataBoard,
    Document,
    Files,
    ScaleToOriginal,
    Setting,
    User
} from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const hotArticle = ref({
    count: 0,
    rows: [] as any[],
})
const hotCases = ref({
    count: 0,
    rows: [] as any[],
})

const refreshArticle = async () => {
    const res = await getHotList('articles', {
        page: 1,
        pageSize: 5,
        attributes: {
            excluede: ['content'],
        },
    })
    if (!res.success) return
    hotArticle.value = res.data
}

const refreshTeachCase = async () => {
    const res = await getHotList('teachCases', {
        page: 1,
        pageSize: 5,
        attributes: {
            excluede: ['doc'],
        },
    })
    if (!res.success) return
    hotCases.value = res.data
}

const getHotData = async () => {
    refreshArticle()
    refreshTeachCase()
}

getHotData()

const quick = [
    // {
    //     label: '首页',
    //     url: '/admin',
    //     icon: House,
    // },
    {
        label: '用户管理',
        url: '/admin/user',
        icon: User,
    },
    {
        label: '教学案例管理',
        url: '/admin/teach-case',
        icon: DataBoard,
    },
    {
        label: '知识库管理',
        url: '/admin/knowledge-base',
        icon: Files,
    },
    {
        label: '文章管理',
        url: '/admin/article',
        icon: Document,
    },

    {
        label: '文章评论管理',
        url: '/admin/comments/article',
        icon: ChatLineSquare,
    },
    {
        label: '教学案例评论管理',
        url: '/admin/comments/teach-case',
        icon: ChatLineSquare,
    },
    {
        label: '大模型配置',
        url: '/admin/big-model-config',
        icon: ScaleToOriginal,
    },
    {
        label: '站点设置',
        url: '/admin/site-config',
        icon: Setting,
    },
]
</script>

<style scoped></style>
